<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="organizationRef" :model="form" :rules="rules" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="机构名称" prop="organizationName">{{ form.organizationName }}</el-form-item>
                    <el-form-item label="授权手机号" prop="contactInformation">{{ form.contactInformation }}</el-form-item>
                    <el-form-item label="联系电话" prop="phonenumber">{{ form.phonenumber }}</el-form-item>
                    <el-form-item label="机构地址" prop="address">{{ form.address }} </el-form-item>
                    <el-form-item label="机构简介" prop="organizationDesc">{{ form.organizationDesc }}</el-form-item>
                    <el-form-item label="成立时间" prop="foundingYears">{{ parseTime(form.foundingYears, "{y}-{m}-{d}")
                    }}</el-form-item>
                    <el-form-item label="入驻时间" prop="createTime">{{ form.createTime }}</el-form-item>
                    <div v-if="form.organizationId && isAudit === 'audit'">
                        <el-form-item label="机构状态" prop="organizationStatus" style="width:40%;min-width:400px;">
                            <el-select v-model="form.organizationStatus" placeholder="请选择机构状态" size="large">
                                <el-option label="通过" :value="1" />
                                <el-option label="未通过" :value="2" />
                                <el-option label="已下架" :value="3" :disabled="form.rootId" />
                                <el-option label="待审核" :value="0" disabled />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.organizationStatus === 2" label="未通过原因：" prop="remark"
                            style="width:60%;min-width:400px;">
                            <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.remark"
                                @focus="remarkLimit = true" @blur="remarkLimit = false" :show-word-limit="remarkLimit"
                                maxlength="100" placeholder="请输入未通过原因" />
                        </el-form-item>
                    </div>
                </div>
                <div class="form-right">
                    <el-form-item label="机构logo" prop="url">
                        <ImagePreview :width="100" :height="100" :src="form.url" :preview-src-list="[form.url]" />
                    </el-form-item>
                    <el-form-item label="机构形象照" prop="coverImageUrl">
                        <ImagePreview :width="100" :height="100" :src="form.coverImageUrl"
                            :preview-src-list="[form.coverImageUrl]" />
                    </el-form-item>
                    <el-form-item label="名片背景" prop="hairstyleImage">
                        <ImagePreview :width="100" :height="100" :src="form.hairstyleImage"
                            :preview-src-list="[form.hairstyleImage]" />
                    </el-form-item>
                    <el-form-item label="营业执照" prop="businessLicenseUrl">
                        <ImagePreview :width="100" :height="100" style="margin-right:10px;margin-bottom:10px;"
                            v-for="v in form.businessLicenseUrl" :key="v.ossId" :src="v.url" :preview-src-list="[v.url]" />
                    </el-form-item>
                    <el-form-item label="机构荣誉" prop="honersImage">
                        <ImagePreview :width="100" :height="100" style="margin-right:10px;margin-bottom:10px;"
                            v-for="v in form.honersImage" :key="v.ossId" :src="v.url" :preview-src-list="[v.url]" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { getOrganization, updateOrganization } from "@/api/decor/designAgency";
const router = useRouter();
const route = useRoute();
const remarkLimit = ref(false)
const { proxy } = getCurrentInstance();
const title = ref('')
const isAudit = ref('')
const data = reactive({
    form: {},
    rules: {
        remark: [{ required: true, message: "未通过原因不能为空", trigger: "blur" }],
        organizationStatus: [
            { required: true, message: "请选择机构状态", trigger: "blur" }
        ],
    }
});
const { form, rules } = toRefs(data);
(() => {
    const organizationId = route.params.organizationId
    title.value = route.params.origin === 'audit' ? '机构审核' : '机构详情'
    isAudit.value = route.params.origin
    if (organizationId) {
        getOrganization(organizationId).then(response => {
            let agencyData = response.data;
            agencyData.url = '';
            agencyData.coverImageUrl = '';
            agencyData.businessLicenseUrl = '';
            agencyData.honersImage = '';
            agencyData.hairstyleImage = '';
            let imgUrlPromises = [];
            // 获取头像的异步操作
            if (agencyData.avatar) {
                let avatarPromise = getImgUrl(agencyData.avatar).then((res) => {
                    agencyData.url = res.data[0].url;
                });
                imgUrlPromises.push(avatarPromise);
            }
            if (agencyData.hairstyle) {
                let hairstyleImagePromise = getImgUrl(agencyData.hairstyle).then((res) => {
                    agencyData.hairstyleImage = res.data[0].url;
                });
                imgUrlPromises.push(hairstyleImagePromise);
            }
            if (agencyData.businessLicense) {
                let businessLicenseImg = getImgUrl(agencyData.businessLicense).then((res) => {
                    agencyData.businessLicenseUrl = res.data;
                });
                imgUrlPromises.push(businessLicenseImg);

            }
            if (agencyData.honors) {
                let honersImages = getImgUrl(agencyData.honors).then((res) => {
                    agencyData.honersImage = res.data;
                });
                imgUrlPromises.push(honersImages);
            }
            // 获取封面图片的异步操作
            if (agencyData.profilePicture) {
                let coverImagePromise = getImgUrl(agencyData.profilePicture).then((res) => {
                    agencyData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(coverImagePromise);
            }

            // 等待所有的异步操作完成
            Promise.all(imgUrlPromises).then(() => {
                form.value = agencyData;
            });
        });
    }

})()

// 提交按钮
const submitForm = () => {
    proxy.$refs["organizationRef"].validate(valid => {
        if (valid) {
            if (form.value.organizationId != null) {
                proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                    return updateOrganization(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("提交成功");
                    router.go(-1)
                }).catch(() => { });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-warn {
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #ACB3BD;
        line-height: 21px;
        text-align: right;
        font-style: normal;
        margin-left: 20px;
    }
}
</style>